<template>
  <div class="BOX">

    <el-col class="elCol" :span="12">
      <h1>上架新商品</h1>
      <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="商品名称：" prop="goodsname">
          <el-input type="text" v-model="goods.goodsname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品信息：" prop="goodsInfo">
          <el-input type="text" v-model="goods.goodsInfo" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品类型：" prop="goodstype">
          <el-input v-model="goods.goodstype"></el-input>
        </el-form-item>

        <el-form-item label="商品价格：" prop="goodsprice">
          <el-input v-model="goods.goodsprice"></el-input>
        </el-form-item>

        <el-form-item label="商品图片：" prop="goodsImg">
          <el-upload
              accept=".jpeg, .png, .jpg"
              class="avatar-uploader"
              action="http"
              :show-file-list="false"
              :http-request="handleUpload">
            <img v-if="goods.goodsImg" :src="goods.goodsImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon el-upload"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品库存:" prop="kucun">
          <el-input type="number" v-model.number="goods.kucun"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>

      </el-form>
    </el-col>

  </div>
</template>

<script>
import {Message} from "element-ui";
import Request from "@/Network/axios";

export default {
  name: "newGoods",
  data() {
    return {
      goods: {
        goodsname: '',
        goodsInfo: '',
        goodstype: '',
        goodsprice: '',
        goodsImg: '',
        kucun: null,
        AddData: '',
        AddActor: ''
      },
      goodsImg: '',
      httpUrl: 'http://localhost:3000'
    }
  },

  methods: {

    // 上传图片文件
    handleUpload(value) {
      // 接收图片信息
      const file = value.file;

      // 设置文件名不能是中文
      var r = /^[^\u4e00-\u9fa5]+$/

      // 限制上次文件类型
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/PNG';
      const isSize = file.size / 1024 / 1024 < 10;
      if (!isJPG && !isPNG && !isSize) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 且 文件大小不超过10MB 格式!');
        return isJPG && isPNG;
      }

      // 进行文件上传
      if (r.test(file.name)) {
        // 使用 FormData() 保存要进行保存的数据类型为 multipart/form-data
        const form = new FormData()
        form.append("file", file)

        // 设置网络请求配置参数
        const config = {
          url: '/user/uploadGoodsImg',
          method: 'post',
          // 设置 设置请求体 Content-Type => 设置请求体的 数据类型 为 multipart/form-data
          headers: {
            'Content-Type': 'multipart/form-data;charset=gbk'
          },
          data: form
        }

        // 网络请求 发送 post 请求
        Request(config).then(res => {
          this.goods.goodsImg = this.httpUrl + res.data
        })
      } else {
        Message({
          type: 'warning',
          message: '文件名不能为存在中文'
        })
      }
    },

    // 添加商品信息
    submitForm() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      this.goods.AddData = year + '-' + month + '-' + day
      this.goods.AddActor = localStorage.getItem('username')

      Request({
        method: 'post',
        url: '/user/addGoods',
        data: {
          goods: this.goods
        }
      }).then(res => {
        let Type;
        res.data.status >= 400 ? Type = 'warning' : Type = 'success'
        Message({
          type: Type,
          message: res.data.message
        })
        if (res.data.status >= 200 && res.data.status < 300){
          this.goods = {
            goodsname: '',
            goodsInfo: '',
            goodstype: '',
            goodsprice: '',
            goodsImg: '',
            kucun: null,
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },

    // 重置表单
    resetForm() {
      this.goods = {
        goodsname: '',
        goodsInfo: '',
        goodstype: '',
        goodsprice: '',
        goodsImg: '',
        kucun: null,
      }
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 40px;
  text-align: center;
  font-family: "Microsoft Yi Baiti";
  margin: 30px 0;
}

.elCol {
  text-align: center;
  margin-left: 23vw;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>